<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>商品详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="__PUBLIC__/js/jquery-1.9.0.js"></script>
    <script src="__PUBLIC__/js/angular.js"></script>
    <script src="__PUBLIC__/js/swiper.min.js"></script>
    <script src="__PUBLIC__/home/plugins/layer/layer.js"></script>

    <script src="__PUBLIC__/common.js"></script>
    <!--标准mui.css-->
    <link rel="stylesheet" href="__PUBLIC__/mui/css/mui.css">
    <link rel="stylesheet" href="__PUBLIC__/css/swiper.min.css">
    <link rel="stylesheet" href="__PUBLIC__/css/new_z.css">
    <style>img{max-width: 100%;}</style>
    <style>
        .info-depict{
            width: 100%;height: auto;overflow-y: visible;
        }
        .xiangqing{
          width: 100%;height: 30px;line-height: 30px;text-indent: 1em;margin-top: 0.5em;
            color: #fff;background-color: #ed373c;
        }
        .gold_g{
            background: url(/Public/images/home_icon_cart@2x.png) no-repeat;
            background-size: 84%;
            width: 30px;
            height: 30px;
            position: absolute;
            top: 10px;
            right: 8px
        }
        .swiper-container {
            width:100%;
        }
        .swiper-container-horizontal>.swiper-pagination{
            bottom: 3px;
            transform: translate(-50%,-50%);
            left: 50%;
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="productCtrl"  ng-cloak>
<header class="mui-bar mui-bar-nav"style="background: #ed373c;" >
    <a class="mui-icon mui-icon-left-nav mui-pull-left" style="color: white" href="/index.php/home/index/index{{urlindex}}"></a>
    <h1 class="mui-title" style="color: white">商品详情</h1>
    <!--<a class="mui-icon mui-icon-navigate mui-pull-right"  style="color: white;" ></a>-->
    <a class="gold_g" href="{:U('cart/cart')}"></a>
</header>
<div style="height: 44px"></div>
<form class="mui-input-group" method="post" style="margin-top: 0">
    <div class="mui-card" style="padding: 0;margin: 0">
        <div class=" mui-card-media">

            <div class="swiper-container" ng-show="imgflg != ''">
                <div class="swiper-wrapper" >
                    <div class="swiper-slide" >
                        <img ng-src="{{product.img}}"  style="width: 100%;"  alt="" />
                    </div>
                    <div class="swiper-slide" ng-repeat="i in product.img_arr" >
                        <img ng-src="{{i}}"  style="width: 100%;"  alt="" />
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>

            <img ng-src="{{product.img}}" ng-hide="imgflg != ''" width="100%"height="100%">

            <input name='id' type="hidden" value="{{product.id}}"  ng-model="id">
        </div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <p style="color: #333;">{{product.name}}</p>
                <p style="color:#e4373c;font-weight: bold">￥{{product.price}}</p>
            </div>
        </div>
        <div style="background:#efeff4;width: 100%;height: 0.5em;"></div>
        <div class="d_num clearfix">
            <label>数量</label>
            <p class="tip_s clearfix">
                <a class="fleft jian count_ico" quantity="-">-</a>
                <input class="fleft cart_product_num" type="text" placeholder="" id="cartnum" ng-model="cartnum">
                <a class="fleft jia count_ico" quantity="+">+</a>
            </p>
        </div>
        <div style="background:#efeff4;width: 100%;height: 0.5em;"></div>
        <div class="info-depict">
            <p class="xiangqing">商品详情</p>
            <div style="padding: 0 3%;color: #8f8f94;">
                <div style="padding: 0 3%;margin-bottom: 60px;">
                    <span style="color: red; font-size: 16px;">简介：</span><span  ng-bind-html="product.introduce | to_trusted"></span><br><br>
                    <span style="color: red; font-size: 16px;">详情：</span><span  ng-bind-html="product.html | to_trusted"></span>
                </div>
            </div>
        </div>

        <div class="mui-content" style="position:fixed;width: 100%;bottom: 0px;z-index: 1000;">
            <button id='login' class=" mui-col-xs-6 mui-btn-warning " style="border-radius: 0;height: 50px" ng-click="sub()">加入购物车</button>
            <button id='login2' class="mui-btn mui-col-xs-6 mui-btn-danger  " style="float: right;border-radius: 0;height: 50px" ng-click="subto()">立即购买</button>
        </div>

    </div>
</form>
</body>
<script language="javascript">

    window.onload=function(){
        var mySwiper = new Swiper('.swiper-container',{
            loop:false,
            pagination : '.swiper-pagination',
            grabCursor: true,
            speed:1000,
            paginationClickable: true,
            autoplayDisableOnInteraction : false,
            autoplay: 3000,
            observer:true,
            observeParents:true,
        })
    }
</script>
<script>
        $(".cancel").click(function () {
            $(".choose_alert").hide();
        });
        $(".mui-card-content-inner").click(function () {
            $(".choose_alert").show();
        });
        $(".mui-btn-danger").click(function () {
            $(".choose_alert").hide();
        });

        function changeCart(){
            console.log(222);
            var cartnum = $("#cartnum").val();
            // $scope.cartnum = cartnum;
        }
</script>
<script>
    var app = angular.module("myApp", []);
    app.filter('to_trusted', ['$sce', function ($sce) {
        return function (text) {
            return $sce.trustAsHtml(text);
        };
    }]);
    app.controller('productCtrl', function($scope, $http) {
        $http({
            method: 'GET',
            url: "/index.php/Home/Product/getProductInfo?id=" + getUrlParam("id")
        }).then(function successCallback(response) {
            $scope.product = response.data.data.product;
            $scope.urlindex = response.data.data.urlindex;
            $scope.imgflg = $scope.product.imgs[0];
            $scope.cartnum = 1;
            $(".cart_product_num").attr("value", $scope.cartnum);
        }, function errorCallback(response) {
            errorHandle(response);
        });

        $scope.sub=function () {
            var cartnum = $(".cart_product_num").val();
            $http({
                method:'POST',
                data:{'id':$scope.product.id,'cartnum':cartnum},
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                transformRequest: function(obj) {
                    var str = [];
                    for (var p in obj) {
                        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                    }
                    return str.join("&");
                },
                url: "/index.php/Home/Product/addToCart"
            }).then(function successCallback(response) {
                successHandle(response, function () {
                    layer.msg("加入购物车成功",{time:1000})
                });
            }, function errorCallback(response) {
                errorHandle(response);
            });
        }

        $scope.subto=function () {
            var cartnum = $(".cart_product_num").val();
            $http({
                method:'POST',
                data:{'id':$scope.product.id, "cartnum":cartnum},
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                transformRequest: function(obj) {
                    var str = [];
                    for (var p in obj) {
                        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                    }
                    return str.join("&");
                },
                url: "/index.php/Home/Product/addToCart"
            }).then(function successCallback(response) {
                successHandle(response, function () {
                    window.location.href="/index.php/Home/Cart/cart"
                });
            }, function errorCallback(response) {
                errorHandle(response);
            });
        }
    });
</script>
</html>